<script lang="jsx">
import render from "@/components/render/index.js";
import draggable from "vuedraggable";

const components = {
  itemBtns(h, currentItem, index, list) {
    const { onCopyItem, onDeleteItem } = this.$attrs
    return [
      <span class="drawing-item-copy" title="复制" onClick={event => {
        onCopyItem(currentItem, list); event.stopPropagation()
      }}>
        <el-icon><CopyDocument/></el-icon>
      </span>,
      <span class="drawing-item-delete" title="删除" onClick={event => {
        onDeleteItem(index, list); event.stopPropagation()
      }}>
        <el-icon><Delete/></el-icon>
      </span>
    ]
  }
}

const layouts = {
  colFormItem(h, currentItem, index, list) {
    const { onActiveItem } = this.$attrs
    const config = currentItem.__config__
    const child = renderChildren.apply(this, arguments)
    let className = 'drawing-item'
    if (this.activeId === config.formId) {
      className += ' active-form-item'
    }
    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
    return (
      <el-col span={config.span} class={className} onClick={event => {console.log('clicked');onActiveItem(currentItem); event.stopPropagation()}}>
        <el-form-item label-width={labelWidth} label={config.label} required={config.required}>
          <render key={config.renderKey} conf={currentItem} onInput={event => {
            config.defaultValue = event
          }}>
            {child}
          </render>
        </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
    )
  },
  rowFormItem(h, currentItem, index, list) {
    console.log(currentItem, index, list)
    const {onActiveItem} = this.$attrs
    const config = currentItem.__config__
    const className = this.activeId === config.formId ? 'drawing-row-item active-form-item'
      : 'drawing-row-item'
    let child = renderChildren.apply(this, arguments)
    if (currentItem.type === 'flex') {
      child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
        {child}
      </el-row>
    }
    const slots = {
      item: ({element, index}) => {
        const layout = layouts[element.__config__.layout]
        if (layout) {
          return layout.call(this, h, element, index, config.children)
        }
      }
    }
    return (
      <el-col span={config.span}>
        <el-row class={className} gutter={config.gutter} onClick={event => {
          onActiveItem(currentItem);
          event.stopPropagation()
        }}>
          <span class="component-name">{config.componentName}</span>
          <draggable v-model={config.children} animation={340} group="componentsGroup" class="drag-wrapper el-row" v-slots={slots}>
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    )
  },
  nonFormItem(h, currentItem, index, list) {
    const { onActiveItem } = this.$attrs
    const config = currentItem.__config__
    const child = renderChildren.apply(this, arguments)
    let className = this.activeId === config.formId ? 'drawing-item active-form-item' : 'drawing-item'
    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
    return (
      <el-col span={config.span} class={className} onClick={event => {onActiveItem(currentItem); event.stopPropagation()}}>
        <el-form-item label-width="0" label="">
          <render key={config.renderKey} conf={currentItem} onInput={event => {
            console.log(config, event)
            config.defaultValue = event
          }}>
            {child}
          </render>
        </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
    )
  },
  raw(h, currentItem, index, list) {
    const config = currentItem.__config__
    const child = renderChildren.apply(this, arguments)
    return <render key={config.renderKey} conf={currentItem} onInput={event => {
      config.defaultValue = event
    }}>
      {child}
    </render>
  }
}

function renderChildren(h, currentItem, index, list) {
  const config = currentItem.__config__
  if (!Array.isArray(config.children)) {
    return null
  }
  return config.children.map((el, i) => {
    const layout = layouts[el.__config__.layout]
    if (layout) {
      return layout.call(this, h, el, i, config.children)
    }
    return layoutIsNotFound.call(this)
  })
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
}

export default {
  components: {
    render,
  },
  props: [
    'currentItem',
    'index',
    'drawingList',
    'activeId',
    'formConf'
  ],
  render(h) {
    let layout = layouts[this.currentItem.__config__.layout]
    if (layout) {
      return layout.call(this, h, this.currentItem, this.index, this.drawingList)
    }
    return layoutIsNotFound.call(this)
  }
}
</script>
